<template>
    <div>
        <hs-breadcrumb :breadcrumb="breadcrumb"></hs-breadcrumb>

        <Card :bordered="false" :style="{marginBottom:'10px'}">
            <!--标题-->
            <div slot="title">
                <div class="hs-screen-box">
                    <div>商户信息</div>
                </div>
            </div>

            <Form ref="formValidate" :model="params" :rules="ruleValidate" :label-width="130">
                <FormItem label="商户名称" prop="mallName">
                    <Input v-model="params.mallName" placeholder="请输入商户名称" style="width: 300px"></Input>
                </FormItem>
                <FormItem label="商户地址" prop="address">
                    <Input v-model="params.address" placeholder="请输入商户地址" style="width: 300px"></Input>
                </FormItem>
                <FormItem label="商户头像" prop="hidPic">
                    <div class="j-img-echo" style="width: 300px">
                        <template v-if="!params.hidPic">
                            <Icon type="md-images" size="55" color="#c5c8ce" />
                        </template>
                        <template v-else>
                            <img :src="params.hidPic">
                        </template>
                    </div>
                    <Upload :action="action" :headers="headers" :show-upload-list="false" name="file" :on-success="uploadHidpicSuccess">
                        <Button icon="ios-cloud-upload-outline" style="width:300px">上传商户头像</Button>
                    </Upload>
                    <!-- <Alert show-icon closable style="margin-top:10px">建议上传1010*404尺寸并且大小不能大于500kb的图片</Alert> -->
                </FormItem>
                <FormItem label="背景图片" prop="backImg">
                    <div class="j-img-echo" style="width: 300px">
                        <template v-if="!params.backImg">
                            <Icon type="md-images" size="55" color="#c5c8ce" />
                        </template>
                        <template v-else>
                            <img :src="params.backImg">
                        </template>
                    </div>
                    <Upload :action="action" :headers="headers" :show-upload-list="false" name="file" :on-success="uploadBackImgSuccess">
                        <Button icon="ios-cloud-upload-outline" style="width:300px">上传背景图片</Button>
                    </Upload>
                    <!-- <Alert show-icon closable style="margin-top:10px">建议上传1010*404尺寸并且大小不能大于500kb的图片</Alert> -->
                </FormItem>
           
                <FormItem label="">
                    <Button type="primary" style="width: 88px" @click="handleSubmit('formValidate')">保存</Button>
                </FormItem>
            </Form>

        </Card>
    </div>
</template>

<script>
    import hsBreadcrumb from '@/components/hs-breadcrumb';

    export default {
        data() {
            return {
                action: this.$uploadURL,
                headers: {
                    token: JSON.parse(sessionStorage.getItem('J-TOKEN')).token
                },
                // 参数
                params: {
                    mallId: '',
                    mallName: '',
                    backImg: '',
                    address: '',
                    hidPic: '',
                },
                ruleValidate:{
                    mallName: [
                        {required: true, message: '商户名称不能为空', trigger: 'change'}
                    ],
                    address: [
                        {required: true, message: '商户地址不能为空', trigger: 'change'}
                    ]
                },
                // 面包屑
                breadcrumb: [
                    {name: '首页', url: '', icon: 'ios-home-outline', size: 18},
                    {name: '商城', url: '', icon: '', size: 0},
                    {name: '商户信息', url: '', icon: '', size: 0}
                ]
            }
        },
        created() {
            // 查询商户信息
            this.getMallInfo();
        },
        methods: {
            // 点击提交验证
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        // 保存商户信息
                        this.udateMall();
                    }
                })
            },
            // 查询商户信息
            getMallInfo() {
                this.axios.post('/mall/getMall').then(res => {
                    console.log(res);
                    if (res.status == 200) {
                        if (res.data){
                            this.params = res.data;
                        }
                    }
                    if (res.status == 201) {
                        this.$Message.error(res.msg);
                    }
                    if (res.status == 500) {
                        this.$Notice.error({
                            title: '服务器内部错误',
                            desc: '查询商户信息接口报错',
                            duration: 0
                        });
                    }
                })
            },
            // 保存商户信息
            udateMall() {
                // 询问是否保存
                this.$Modal.confirm({
                    title: `是否保存商户信息？`,
                    onOk: () => {
                        this.axios.post('/mall/update', this.params).then(res => {
                            console.log(res);
                            if (res.status == 200) {
                                this.$Message.success('操作成功.')
                            }
                            if (res.status == 201) {
                                this.$Message.error(res.msg);
                            }
                            if (res.status == 500) {
                                this.$Notice.error({
                                    title: '服务器内部错误',
                                    desc: '保存商户信息接口报错',
                                    duration: 0
                                });
                            }
                        })
                    },
                    onCancel: () => {
                        this.$Message.info('您点击了取消.');
                    }
                });
            },
              // 上传成功
            uploadBackImgSuccess(response, file, fileList){
                if (response.status == 200) {
                    this.params.backImg = response.data;
                }
                if(response.status == 201){
                    this.$Message.error(response.msg);
                }
                if (response.status == 500) {
                    this.$Notice.error({
                        title: '服务器内部错误',
                        desc: '上传背景图片接口报错',
                        duration: 0
                    });
                }
            },
                 // 上传成功
            uploadHidpicSuccess(response, file, fileList){
                if (response.status == 200) {
                    this.params.hidPic = response.data;
                }
                if(response.status == 201){
                    this.$Message.error(response.msg);
                }
                if (response.status == 500) {
                    this.$Notice.error({
                        title: '服务器内部错误',
                        desc: '上传头像接口报错',
                        duration: 0
                    });
                }
            },
        },
        components: {
            hsBreadcrumb,
        }
    }
</script>

<style scoped>

</style>